<template>
  <a-row type="flex" :gutter="10">
    <a-col :md="5" :sm="24">
      <a-card :loading="cardLoading" :bordered="false" style="height: 100%;">

        <a-spin :spinning="loading"  style="height: 95%">
          <a-alert type="info" :showIcon="true">
            <div slot="message">
              当前选择：<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
              <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
            </div>
          </a-alert>
          <a-tree
            showLine
            showIcon
            :expandedKeys.sync="expandedKeys"
            :selectedKeys="selectedKeys"
            :dropdownStyle="{maxHeight:'100',overflow:'auto'}"
            :treeData="treeDataSource"
            @select="handleTreeSelect"
          />
        </a-spin>
      </a-card>

    </a-col>
    <a-col :md="19" :sm="24">
      <a-card :bordered="false" class="card-area">
        <!-- 查询区域 11111-->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" :label-col="labelCol" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-item label="处方类型">
                  <a-select v-model="queryParam.templateType" placeholder="请选择处方类型" default-value="3">
                    <a-select-option value="3">西药处方</a-select-option>
                    <a-select-option value="4">中药处方</a-select-option>
                    <a-select-option value="5">输注处方</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="处方名称">
                  <a-input placeholder="请输入处方名称" v-model="queryParam.prescriptionName"></a-input>
                </a-form-item>
              </a-col>
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
           <a-col :md="6" :sm="24">
               <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
               <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
           </a-col>
        </span>
            </a-row>
          </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="handleCategory" type="primary" icon="plus">新增处方分类</a-button>
          <a-button @click="handleAdd" type="primary" icon="plus">新增中西成药处方</a-button>
          <a-button @click="handleAdd4" type="primary" icon="plus">新增中药处方</a-button>
          <a-button @click="handleAdd5" type="primary" icon="plus">新增输注处方</a-button>
        </div>

        <!-- table区域-begin -->
        <div>


          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                <a-menu slot="overlay">
                      <a-menu-item>
                        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                          <a>删除</a>
                        </a-popconfirm>
                      </a-menu-item>
                </a-menu>
          </a-dropdown>
        </span>

          </a-table>
        </div>
        <!-- table区域-end -->

        <!-- 表单区域 -->
        <hHisPrescriptionTemplate3-modal ref="modalForm" @ok="modalFormOk"></hHisPrescriptionTemplate3-modal>

        <hHisPrescriptionTemplate4-modal ref="modalForm4" @ok="modalFormOk"></hHisPrescriptionTemplate4-modal>
        <hHisPrescriptionTemplate5-modal ref="modalForm5" @ok="modalFormOk"></hHisPrescriptionTemplate5-modal>
        <h-goods-category-modal ref="goodsCategoryModal" @ok="modalFormOk"></h-goods-category-modal>
      </a-card>
    </a-col>
  </a-row>


</template>
<script>
import '@/assets/less/TableExpand.less'
import hHisPrescriptionTemplate3Modal from './modules/HHisPrescriptionTemplate3Modal'
import HHisPrescriptionTemplate4Modal from './modules/HHisPrescriptionTemplate4Modal'
import HHisPrescriptionTemplate5Modal from './modules/HHisPrescriptionTemplate5Modal'
import HGoodsCategoryModal from './modules/HGoodsCategoryModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { putAction, getAction, postAction } from '@/api/manage'

import { queryPrescriptionCategoryTreeList, frozenBatch } from '@/api/api'


export default {
  name: 'h_his_prescription_templateList',
  mixins: [JeecgListMixin],
  components: {
    hHisPrescriptionTemplate3Modal,
    HHisPrescriptionTemplate4Modal,
    HHisPrescriptionTemplate5Modal,
    HGoodsCategoryModal
  },
  data() {
    return {
      description: '处方模板管理页面',
      labelCol: { style: { width: '110px' } },
      cardLoading: true,
      loading: false,
      treeDataSource: [],
      selectedKeys: [],
      expandedKeys: [],
      currSelected: {},
      treeData: [],
      departTree: [],
      disableMixinCreated:true,
      queryParam:{
        templateType:"3"
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },

        {
          title: '处方名称',
          align: 'center',
          dataIndex: 'prescriptionName',
          width: 130
        },
        {
          title: '模板分类',
          align: 'center',
          dataIndex: 'categoryName',
          width: 130
        },
        {
          title: '处方类型',
          align: 'center',
          dataIndex: 'templateType',
          customRender: function(t, r, index) {
            if (t == '3') {
              return '西药处方'
            }
            if (t == '4') {
              return '中药处方'
            }
            if (t == '5') {
              return '输注处方'
            }
            return ''
          },
          width: 130
        },

        {
          title: '主治',
          align: 'center',
          dataIndex: 'indications'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 120
        }
      ],
      url: {
        list: '/his/prescription/template/list',
        delete: '/his/prescription/template/delete',
        deleteBatch: '/his/prescription/template/deleteBatch',
        exportXlsUrl: 'system/hHisPrescriptionTemplate/exportXls',
        importExcelUrl: 'system/hHisPrescriptionTemplate/importExcel'
      }
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  created() {
    this.queryTreeData()
    this.loadData();
  },
  methods: {
    queryTreeData(keyword) {
      this.commonRequestThen(queryPrescriptionCategoryTreeList({
        departName: keyword ? keyword : undefined
      }))
    },
    handleSearch(value) {

    },
    handleTreeSelect(selectedKeys, event) {
      if (selectedKeys.length > 0 && this.selectedKeys[0] !== selectedKeys[0]) {
        this.selectedKeys = [selectedKeys[0]]
        let id = event.node.dataRef.id
        this.emitInput(id)
        let record = event.node.dataRef
        console.log('onSelect-record', record)
        this.currSelected = Object.assign({}, record)
      }
    },
    emitInput(id) {
      console.log('emitInput', id)
      this.$emit('input', id)
    },
    commonRequestThen(promise) {
      this.loading = true
      this.treeData = []
      this.departTree = []
      promise.then(res => {
        if (res.success) {
          this.treeDataSource = res.result
          // update-begin- --- author:wangshuai ------ date:20200102 ---- for:去除默认选中第一条数据、默认展开所有第一级
          // 默认选中第一条数据、默认展开所有第一级
          if (res.result.length > 0) {
            this.expandedKeys = []
             res.result.forEach((item, index) => {
              //默认选中第一条数据
              // if (index === 0) {
              //   this.selectedKeys = [item.id]
              //   this.emitInput(item.deptId)
              // }
              this.expandedKeys.push(item.id)
            })
          }
          // update-end- --- author:wangshuai ------ date:20200102 ---- for:去除默认选中第一条数据、默认展开所有第一级
        } else {
          this.$message.warn(res.message)
          console.error('查询失败:', res)
        }
      }).finally(() => {
        this.loading = false
        this.cardLoading = false
      })
    },
    setThisExpandedKeys(node) {
      //只展开一级目录
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key)
        //下方代码放开注释则默认展开所有节点
      }
    },
    getCurrSelectedTitle() {
      return !this.currSelected.title ? '' : this.currSelected.title
    },

    onClearSelected() {
      this.selectedKeys = []
      this.expandedKeys = []
      this.currSelected = {}
      this.queryTreeData()
      this.emitInput('')
    },

    handleAdd4: function() {
      if(this.currSelected.id==undefined||this.currSelected.id==null){
        this.$message.warn("请选择左边的分类")
        return ;
      }
      this.$refs.modalForm4.add(this.currSelected);
      this.$refs.modalForm4.disableSubmit = false
    },
    handleAdd5: function() {
      if(this.currSelected.id==undefined||this.currSelected.id==null){
        this.$message.warn("请选择左边的分类")
        return ;
      }
      this.$refs.modalForm5.add(this.currSelected);
      this.$refs.modalForm5.disableSubmit = false
    },
    handleCategory: function () {
      if(this.currSelected.id==undefined||this.currSelected.id==null){
        this.$message.warn("请选择左边的分类")
        return ;
      }
      this.$refs.goodsCategoryModal.add(this.currSelected);
      this.$refs.goodsCategoryModal.title = "新增";
      this.$refs.goodsCategoryModal.disableSubmit = false;
    },
    handleAdd: function () {
      if(this.currSelected.id==undefined||this.currSelected.id==null){
        this.$message.warn("请选择左边的分类")
        return ;
      }
      this.$refs.modalForm.add(this.currSelected);
      this.$refs.modalForm.title = "新增";
      this.$refs.modalForm.disableSubmit = false;
    },
  }
}
</script>
<style>
.fixed-button-container {

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>